<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" 
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:ui="http://java.sun.com/jsf/facelets"
  		xmlns:p="http://primefaces.org/ui" 
  		xmlns:pe="http://primefaces.org/ui/extensions" 
  		xmlns:c="http://java.sun.com/jsp/jstl/core" >

<ui:decorate id="msrpDecoration" template="/resources/template/template.xhtml">

	<ui:define name="title">Monitoramento</ui:define>
	
  	<ui:define name="body">
  		
  		<p:ajaxStatus oncomplete="chamarServlet();" />

  		<h:panelGroup id="pnlFilter">
			<h:inputHidden id="jsonMonitoramento" value="#{monitoramentoBean.jsonMonitoramento}" />
			
			<div id="divMensagem" class="ui-messages-error ui-corner-all"
				style="display: none; position: absolute; z-index: 5001; top: 400px; left: 50%; 
				visibility: visible; padding: 0px; margin-left: -200px; width: 430px; height: 45px;">
				<table style="width: 430px;">
					<tr>
						<td>
							<div style="margin-top: 10px; padding-right: 0px; border-right-width: 10px; margin-right: 0px; margin-left: 10px;">
								<h:outputText id="txtMensagem" inlineStyle="font-size:16px; font-weight:bold;" />
							</div>
						</td>
						<td align="right" style="padding-right:10px;">
							<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-minimize ui-corner-all" href="#" 
								role="button" onclick="ocultarDiv('divMensagem');">
								<span class="ui-icon ui-icon-close"></span>
							</a>
						</td>
					</tr>
				</table>
			</div>
			
	  		<p:dialog id="filtro" header="Filtro" widgetVar="filtro" 
	  			showEffect="fade" hideEffect="fade" closable="false"
	  			minimizable="true" visible="true" position='right,top'>
				<h:panelGrid columns="1">
					<h:outputLabel styleClass="fonte" value="Carga(*)" for="txtIdCarga"/>
				    <p:inputText id="txtIdCarga" value="#{monitoramentoBean.parametersSearch.idCarga}" required="true" requiredMessage="* Campo Obrigatório.">
				      <pe:keyFilter mask="num" />
				    </p:inputText>
				    <h:message id="valIdCarga" for="txtIdCarga" style="color:red;"/>
					<p:spacer height="10px"/>
					<h:outputLabel styleClass="fonte" value="Roteiro" />
				    <p:inputText value="#{monitoramentoBean.parametersSearch.numRoteiro}" >
				      <pe:keyFilter mask="num" />
				    </p:inputText>
					<p:spacer height="10px"/>
					<h:outputLabel styleClass="fonte" value="Competência(*)" for="txtCompetencia"/>
				    <p:inputMask id="txtCompetencia" mask="99/9999" value="#{monitoramentoBean.parametersSearch.competencia}" required="true" requiredMessage="* Campo Obrigatório.">
				      <f:converter converterId="competenciaConverter" />
				    </p:inputMask>
				    <h:message id="valCompetencia" for="txtCompetencia" style="color:red;"/>
				    <p:spacer height="10px"/>
				    <h:outputLabel styleClass="fonte" value="Leiturista" />
				    <p:inputText value="#{monitoramentoBean.parametersSearch.codLeiturista}" >
				      <pe:keyFilter mask="num" />
				    </p:inputText>
				    <p:spacer height="10px"/>
				    <h:outputLabel styleClass="fonte" value="Status" />
					<h:selectOneMenu value="#{monitoramentoBean.parametersSearch.situacaoRoteiro}" style="width:190px;">
						<f:selectItem itemLabel="[Selecione]" />
						<f:selectItems var="_status" itemValue="#{_status}" itemLabel="#{_status}" value="#{monitoramentoBean.statuses}" />
					</h:selectOneMenu>
			    </h:panelGrid>
			    
	            <div style="float: right; padding: 20px 2px 10px 0;">
		           	<p:commandButton update="frmDados:pnlFilter" styleClass="buttonClass"
		           		value="Consultar" actionListener="#{monitoramentoBean.monitorar}" />
	           </div>
			</p:dialog>
		</h:panelGroup>
		
		<div id="map_canvas" style="width: 100%; height: 100%; position:absolute;"></div>
		
		<script type="text/javascript" 
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_coK_3WFOgHXfeM-fu6W4WcPWOYUJBq4&amp;sensor=false">
		</script>
		
		<script src="#{ctx}/resources/js/markerwithlabel.js"></script>
		<script src="#{ctx}/resources/js/monitoramento.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$("#frmDados").css("bottom", 0);
				$("#frmDados").css("padding", 0);
				inicializeMap(-5.298827,-39.552613,8);
			});
		</script>
  	</ui:define>
  	
</ui:decorate>
</html>
